<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件 </title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <div id="app">
      <!--biaoti指的是props的值   如果使用v-bind:biaoti的话，里边的值需要时data的key-->
      <zujian biaoti="组件一1111"></zujian>
      <zujian biaoti="组件二2222"></zujian>
      <hr>
      <!--参数的传递   v-for这个是遍历vue的data的blogs属性    :date指的是组件的date的属性  blog.date指的是vue对象的data的属性 -->
     <myblog @sayhello="nihao" v-for="(blog,index) in blogs" :title="blog.title" :date="blog.date" :author="blog.author" :key="index">
         <div style="color: #ff0000;">hello javaboy!</div>
         <!--'<slot></slot>'+  插件实际使用的地方-->
     </myblog>
  </div>

<script>

    //组件是方法  第一个是组件名  第二个参数是一个对象，模板的内容
    Vue.component('zujian',{
            data(){
                //如果使用里边的属性的话，data需要改成方法  并且有返回值对象  在对象中来设置值
                 //这样有一个好处是  组件的属性不共用
                return{
                    count:0,
                }
            },
        props: ['biaoti'],//传递数据
        template: '<div><button  v-on:click="count++">hello {{count}}!</button><div>{{biaoti}}</div></div>'
       }
    );
/*实例中的方法nihao被调用的过程  @click="$emit('sayhello',title)"  自定义一个方法 sayhello并且传参数title
  调用自定义的方法@sayhello    参数是实例的"nihao"方法
* */

    Vue.component('myblog',{
            props: ['title', 'date', 'author'],//传递数据
            template: '<div>' +
                '<div>{{title}}</div>' +
                '<div>{{date}}--{{author}}</div>' +
                '<slot></slot>'+
                '<button @click="$emit(\'sayhello\',title)">click</button>' +
                '</div>'

    }
    );

    var app =new Vue({
      el:"#app",
       data:{
          msg:"boy",
           blogs: [
               {
                   title: '标题一',
                   date: '2019-09-13',
                   author: 'javaboy'
               }, {
                   title: '标题二',
                   date: '2019-09-14',
                   author: 'javaboy'
               }, {
                   title: '标题三',
                   date: '2019-09-15',
                   author: '江南一点雨'
               }
           ]
       },
        methods: {
            nihao(val) {
                console.log("hello " + val + "!")
            }
        },

    });




</script>

</body>
</html>